<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="description" content="" />
    <meta name="Keywords" content="" />
    <title>美兔电竞</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="layout">
    <div class="main">
        <section>
            <div class="main__score">
                <a href="score-order.html">
                    <img src="images/main1.png" alt="">
                </a>
            </div>
            <div class="main__word upstar">
                <img src="images/word1.png" alt="">
            </div>
            <!--<div class="main__word upstar">-->
                <!--快速上分  大神坐镇  carry全场  翻车必赔-->
            <!--</div>-->
        </section>
        <section>
            <div class="main__line">
                <span></span>
                <span></span>
            </div>
        </section>
        <section>
            <div class="main__game">
                <a href="amuse-index.html">
                    <img src="images/main2.png" alt="">
                </a>
            </div>
            <div class="main__word">
                <img src="images/word2.png" alt="">
            </div>
        </section>
        <nav class="nav">
            <ul>
                <li>
                    <a href="#">
                        <img src="images/indexon.png" alt="">
                        <p>首页</p>
                    </a>
                </li>
                <li>
                    <a href="shop-order.html">
                        <img src="images/indexT.png" alt="">
                        <p>订单</p>
                    </a>
                </li>
                <li>
                    <a href="news.html">
                        <img src="images/indexD.png" alt="">
                        <p>消息</p>
                    </a>
                </li>
                <li>
                    <a href="my.html">
                        <img src="images/indexJ.png" alt="">
                        <p>我的</p>
                    </a>
                </li>
            </ul>
        </nav>
        <!--首单一元红包-->
        <div class="first">
            <div class="first__mask"></div>
            <div class="first__con cai">
                <!--未拆红包与已领取红包背景-->
                <div class="first__img" id="cai">
                    <img src="images/onebg.png" alt="">
                </div>
                <!--已拆红包加背景-->
                <div class="first__img--head">
                    <img src="images/onebg1.png" alt="">
                </div>
                <!--未拆红包说明-->
                <div class="first__info" id="Info">
                    <p>新用户</p>
                    <p>首单一元红包</p>
                </div>
                <!--已领取红包说明-->
                <div class="first__info no">
                    <p>您已领取该红包</p>
                    <p>请在<a href="amuse-quan.html">我的优惠券</a>查看</p>
                </div>
                <!--已拆红包标题-->
                <div class="first__tit">
                    <p>恭喜您获得</p>
                </div>
                <!--已拆红包优惠券-->
                <div class="amusequan__list amusequan__list--hongbao">
                    <div class="amusequan__top">
                        <span class="amusequan__img"><img src="images/quanicon.png" alt=""></span>
                        <div class="amusequan__info">
                            <span class="amusequan__tit">新用户首单一元券</span>
                            <p>暂时还没定好是什么规则，暂时还没定 </p>
                        </div>
                    </div>
                    <div class="amusequan__bottom">
                        <span>有效期至：2017-11-30</span>
                    </div>
                </div>
                <!--已拆红包说明-->
                <div class="first__des">
                    <p>仅限新用户使用</p>
                </div>
                <div class="first__btn">
                    <a href="score-order.html">立即使用</a>
                </div>
                <div class="first__logo">
                    <img src="images/logo3.png" alt="">
                </div>
                <div class="first__close">
                    <img src="images/oneclose.png" alt="">
                </div>
            </div>
        </div>
        <!--海报-->
        <div class="first__poster">
            <div class="first__mask"></div>
            <div class="first__poster--con">
                <img src="images/poster.jpg" alt="">
                <div class="first__poster--img">
                    <img src="images/ewm3.jpg" alt="">
                </div>
                <div class="first__close">
                </div>
            </div>
        </div>

        <!--客服引导-->
        <div class="guide__icon" id="guideIcon">
            <img src="images/services.png" alt="">
        </div>
        <div class="guide">
            <div class="guide__mask"></div>
            <div class="guide__con">
                <div class="guide__tit">
                    <img src="images/servicetit.png" alt="">
                </div>
                <div class="guide__rule">
                    <img src="images/help.png" alt="">
                </div>
                <div class="guide__link">
                <span class="guide__ewm">
                    <img src="images/ewm2.png" alt="">
                </span>
                    <span class="guide__links">
                    <img src="images/link.png" alt="">
                </span>
                </div>
                <div class="guide__close" id="guideClose">
                    <img src="images/serviceclose.png" alt="">
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery-1.12.2.min.js"></script>
<script>
    $(function(){
        $("#cai").click(function(){
            console.log($(".first__con").hasClass("caino"));
            if($(".first__con").hasClass("caino")){
                return false;
            }else{
                $("#Info").hide();
                $(".first__con").removeClass("cai");
            }
        })
        $(".first__close,.first__mask").click(function(){
            $(".first,.first__poster").hide();
        })

        //    引导
        $("#guideIcon").click(function(){
            $(this).hide();
            $(".guide").show();
        })

        $("#guideClose").click(function(){
            $(".guide").hide();
            $("#guideIcon").show();
        })
    })
</script>
</body>
</html>